<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .water {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 5s linear 1;
        }

        .no-water {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
        }

        .first-run {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 5s linear 1;
        }

        .runing {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: run 10s linear infinite;
        }

        .runwater1 {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: run 10s linear infinite;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }

        @keyframes run {
            from {
                stroke-dasharray: 10, 5;
            }

            to {
                stroke-dasharray: 40, 5;
            }
        }

        @keyframes move {
            0% {
                left: 0;
                top: 20px;
            }

            20%,
            80% {
                top: 20px;
            }

            30%,
            70% {
                top: 0;
            }

            100% {
                left: 300px;
                top: 20px;
            }
        }
    </style>
</head>

<body>
    <svg width="405px" height="202px" id="svg" preserveAspectRatio="xMinYMin meet">
        <!-- <path id="path" stroke="#00FFFF" stroke-dasharray="5,5" stroke-width="3" fill="none"
            d="M52.730,3.885 C52.730,3.885 96.338,120.719 0.601,193.115"></path> -->
        <!-- <g id="gImg"  >
                <image x="0" y="-50" width="107" height="58"  href="./dian.png"></image>
                <animateMotion  dur="3s" repeatCount="indefinite" rotate="auto">
                    <mpath xlink:href="#path"/>
                </animateMotion>
            </g> -->
        <!--运动的相关参数  1、href链接到图片   mpath链接到路径-->
        <!-- <rect x="0" y="-10" width="20" height="20" fill="blue" stroke="black" stroke-width="1">
            <animateMotion  dur="3s" repeatCount="indefinite" rotate="auto">
                <mpath xlink:href="#path"/>
            </animateMotion>
        </rect> -->
        <polyline class="water" id="water2" style="fill:white;stroke:#00FFFF;stroke-width:3"
            points="52.72999954223633,3.884999990463257 54.365333557128906,8.876556396484375 55.80260467529297,13.929109573364258 57.087738037109375,19.022544860839844 58.233863830566406,24.149066925048828 59.24724197387695,29.303485870361328 60.129764556884766,34.4819221496582 60.88205337524414,39.680870056152344 61.503421783447266,44.89708709716797 61.992374420166016,50.127376556396484 62.34654998779297,55.36851501464844 62.56332778930664,60.61711502075195 62.63991165161133,65.86963653564453 62.57297897338867,71.12226867675781 62.35927200317383,76.3709716796875 61.99501419067383,81.61136627197266 61.477027893066406,86.83879089355469 60.801780700683594,92.04824829101562 59.96602249145508,97.23434448242188 58.96685028076172,102.39144134521484 57.8010368347168,107.51343536376953 56.46681213378906,112.59416961669922 54.962154388427734,117.62703704833984 53.28559875488281,122.60527801513672 51.43655776977539,127.52205657958984 49.41499710083008,132.37045288085938 47.22208023071289,137.14378356933594 44.85894012451172,141.83514404296875 42.328025817871094,146.4381866455078 39.632537841796875,150.94680786132812 36.77618408203125,155.3553009033203 33.763587951660156,159.65855407714844 30.59981918334961,163.85191345214844 27.29071807861328,167.93153381347656 23.842248916625977,171.89418029785156 20.261009216308594,175.7371368408203 16.553701400756836,179.45867919921875 12.727145195007324,183.05751037597656 8.788246154785156,186.53305053710938 4.7439680099487305,189.88540649414062 ">
        </polyline>
    </svg>
    <script>
        var water2 = document.querySelector('#water2');

        water2.addEventListener("webkitAnimationEnd", function(evt) { //动画结束时事件
        this.className.baseVal = "runing";
        },
        false);


        // var path1 = "m168.5,30c0,-1 0.96384,-1.11587 4,-2c3.95868,-1.15277 9.04495,-0.2669 15,-1c4.09221,-0.50377 9.01257,-0.64556 14,-1c7.05328,-0.50126 15,-1 23,-1c6,0 13,0 21,0c9,0 16,0 17,0c1,0 6.41422,2.58579 5,4c-0.70709,0.70711 -4.13043,1.48757 -9,3c-7.27304,2.25893 -13.07278,6.8819 -18,10c-6.09346,3.85613 -13.97354,9.06009 -23,13c-13.95969,6.09319 -31.09531,13.79768 -44,20c-10.07687,4.8432 -18.25406,7.35724 -24,10c-5.2975,2.4365 -12,6 -18,9c-4,2 -8.94341,3.14773 -14,5c-5.93867,2.17538 -10.07844,2.78985 -13,4c-2.06586,0.85571 -3.18734,1.79319 -1,0c5.57665,-4.57176 14.78916,-10.40383 26,-16c10.81097,-5.39656 19.94585,-10.14858 28,-13c8.94293,-3.16607 18.93364,-5.36646 29,-7c7.95816,-1.29143 16.01761,-2.50378 23,-3c7.05328,-0.50126 15,-1 25,-1c10,0 19,0 26,0c9,0 17,0 26,0c4,0 7,0 8,1c1,1 2,4 3,8c1,4 2.09964,8.06743 1,17c-1.00754,8.18443 -6,15 -9,21c-3,6 -4.56952,10.133 -6,14c-2.32739,6.29152 -3.0979,8.82443 -5,10c-0.85065,0.52573 -1.91754,-0.05664 -4,-3c-2.88785,-4.0817 -7.86548,-9.26365 -12,-15c-3.92236,-5.44198 -12.08847,-17.93415 -21,-30c-8.08066,-10.94089 -13.69594,-19.1594 -18,-27c-2.80591,-5.11145 -4.29289,-6.29289 -5,-7c-1.41422,-1.41422 -2.14774,-4.94341 -4,-10c-2.17538,-5.93866 -1,-13 -3,-13c-2,0 -1,7 -1,14c0,16 0.16263,32.0242 -2,46c-1.86035,12.02244 -3.87253,27.03259 -7,39c-2.88283,11.03128 -3.58578,17.58578 -5,19c-0.70711,0.70711 -2,-2 -2,-7c0,-7 2.98692,-15.75711 4,-22c0.96109,-5.92252 3.17293,-11.44966 6,-19c1.78799,-4.77525 2.41589,-6.76108 4,-10c1.38936,-2.84072 1,-4 2,-5c1,-1 2,-1 4,0c4,2 9.04735,5.93789 13,9c5.06187,3.92142 8.87766,6.066 10,8c1.80972,3.11848 1.5405,5.0535 2,7c0.51375,2.17625 1,3 1,4c0,1 -2,1 -4,1c-2,0 -5.132,-1.75532 -9,-4c-3.11848,-1.80972 -3,-4 -4,-4c-1,0 1.42215,4.19075 3,8c2.23141,5.3871 3.84723,9.04132 5,13c0.88414,3.03616 1,5 1,7c0,3 -1.69255,5.186 -3,7c-0.8269,1.14726 -2.48825,1.58672 -5,-1c-6.57204,-6.76817 -10.51442,-16.46185 -21,-27c-9.48933,-9.5369 -16.87856,-14.49346 -20,-15c-3.94835,-0.64073 -9,0 -16,0c-5,0 -9,0 -10,0c-1,0 -1,-1 0,-1c4,0 8.186,1.69255 10,3c2.29454,1.65381 1.85194,3.22836 3,6c0.5412,1.30656 1.4595,2.0535 1,4c-0.51375,2.17625 -3.87856,4.49346 -7,5c-4.93544,0.80091 -10,0 -13,0c-1,0 2.19801,0.63297 8,4c3.11848,1.80972 5,3 5,4c0,1 0.91948,2.48692 -1,5c-2.18855,2.86536 -8,4 -15,5c-7,1 -11,1 -13,1c-1,0 -1.1387,1.00966 -1,2c1.00977,7.20975 7.74022,14.24005 17,24c5.84019,6.15565 13.97252,9.64749 15,14c1.14876,4.86624 3.60582,11.14442 2,20c-1.52446,8.40691 -8.67679,19.18256 -15,30c-4.76083,8.14459 -8.38687,13.9176 -11,15c-0.92387,0.38269 -3,-2 -3,-9c0,-14 2,-24 6,-32c4,-8 8.25287,-17.83705 16,-24c7.38283,-5.87314 14.66708,-8.94373 22,-11c6.80844,-1.90919 15,-1 24,-1c12,0 24,0 34,0c9,0 16.87857,-0.49345 20,-1c0.98709,-0.16019 1.83981,0.01291 2,1c0.50653,3.12144 2.57974,8.8905 4,18c1.70151,10.91351 1,24 1,36c0,12 0.45557,26.1328 -5,44c-3.69391,12.09772 -7,23 -11,31c-2,4 -2.09789,6.82443 -4,8c-0.85065,0.52573 -1,2 -3,2c-3,0 -6.74066,-2.38458 -14,-7c-15.49161,-9.84937 -37.41005,-19.27457 -52,-28c-12.37761,-7.40234 -16.62532,-12.41362 -21,-16c-2.78833,-2.28587 -6.67261,-5.70848 -9,-12c-1.4305,-3.867 -2,-9 -2,-13c0,-1 -0.203,-3.2565 1,-4c2.68999,-1.66251 7.81602,-2.7007 18,-5c12.83,-2.89671 29,-3 44,-3c13,0 23.61731,1.92387 24,1c1.0824,-2.61313 -4.21005,-5.85075 -7,-10c-3.2536,-4.83881 -4.41156,-9.40401 -8,-14c-2.61098,-3.34407 -6.88152,-7.19028 -10,-9c-1.93399,-1.12234 -3,-2 -4,-3c0,0 0,5 0,10c0,10 0.56841,26.05223 -1,40c-1.46977,13.07057 -1.09271,23.03748 -2,34c-0.50171,6.06204 -1.29289,9.29291 -2,10c-0.70711,0.70709 -3.00388,0.76706 -10,1c-15.02496,0.50027 -32.53976,4.46872 -40,6c-0.97958,0.20108 -3,0 -4,0c-1,0 1,0 8,0c9,0 28,0 45,0c12,0 23,0 32,1l8,1l4,0l3,0";
        // var path = 'M405.986,38.135 C405.986,38.135 99.609,-109.963 3.768,202.041';
        // var pathElement = document.createElementNS('http://www.w3.org/2000/svg', "path");
        // var car = document.getElementById('car');
        // // pathElement.setAttributeNS(null, 'd', path);
        var numPoints = 40;

        var mypath = document.getElementById("path");
        var pathLength = mypath.getTotalLength();
        var polygonPoints = "";

        for (var i = 0; i < numPoints; i++) {
            var p = mypath.getPointAtLength(i * pathLength / numPoints);

            polygonPoints +=p.x+','+p.y+' ';
        }

        console.log(polygonPoints)

            // var anim = document.getElementById('motion');
            // car.setAttributeNS('http://www.w3.org/1999/xlink',"xlink:href",'./dian.png');

            // setTimeout(() => {
            //     anim.beginElement();
            // }, 2000)

            // var STEP = 100;
            // var curStep = 0;

            // var $car = $('#car');

            // var timer = null;
            // var totalLength = pathElement.getTotalLength();
            // var initPosition = pathElement.getPointAtLength(1);
            // var prePosition = initPosition;
            // var curPosition = initPosition;
            // console.log(curPosition);


            // function getRotate(a, b) {
            //     var k = (b.y - a.y) / (b.x - a.x);
            //     var rotate = Math.atan(k) * 180 / Math.PI - 20;
            //     return k < 0 ? rotate + 90 : rotate - 90;
            // }

            // // 定位car
            // $car.css({
            //     left: initPosition.x,
            //     top: initPosition.y,
            //     'transform': 'translate(-8px, -4px) rotate(' + getRotate(curPosition, pathElement.getPointAtLength(1)) + 'deg)'
            // }).show()

            // timer = setInterval(function () {

            //     if (curStep != STEP) {
            //         curStep++;

            //         curPosition = pathElement.getPointAtLength(totalLength / STEP * curStep);


            //         $car.css({
            //             left: curPosition.x,
            //             top: curPosition.y,
            //             '-webkit-transform': 'translate(-8px, -4px) rotate(' + getRotate(prePosition, curPosition) + 'deg)'
            //         }).show();
            //         prePosition = curPosition;
            //     } else {
            //         curStep = 0;
            //     }

            // }, 30)

    </script>
</body>

</html>